<template>
  <div class="flex flex-col gap-8 w-full max-w-3xl mx-auto">
    <div class="flex flex-col gap-2 pb-6 border-b border-slate-200 mb-4">
      <h2 class="text-xl font-semibold text-slate-700 m-0">分类和标签</h2>
      <p class="text-sm text-slate-500 leading-relaxed m-0">
        为你的文章选择合适的分类和标签，这样可以帮助读者更好地发现你的内容。
      </p>
    </div>
    
    <div class="flex flex-col gap-8">
      <CategoryTagSelector 
        :categories="props.categories"
        :tags="props.tags"
      />
      
      <!-- 系列选择 -->
      <div class="space-y-4">
        <div class="space-y-1">
          <h3 class="text-base font-medium text-slate-700 flex items-center">
            系列文章 <span class="text-slate-400 font-normal ml-1">(可选)</span>
          </h3>
          <p class="text-sm text-slate-500">
            将文章添加到系列中，方便读者系统学习相关内容。
          </p>
        </div>
        
        <SeriesSelector 
          v-model="editorStore.seriesId"
          @update:modelValue="handleSeriesChange"
        />
        
        <!-- 系列文章顺序管理 -->
        <SeriesPostOrder
          v-if="editorStore.seriesId"
          :series-id="editorStore.seriesId"
          :post-id="editorStore.postId"
          :sort-mode="editorStore.sortMode"
          @update:sortMode="handleSortModeChange"
          @update:seriesOrder="handleSeriesOrderChange"
        />
      </div>
    </div>
    
    <!-- 步骤导航 -->
    <div class="flex justify-between items-center mt-6">
      <button 
        class="flex items-center gap-2 px-5 py-2.5 rounded-md text-sm font-medium bg-slate-100 text-slate-600 border border-slate-200 hover:bg-slate-200 transition-colors"
        @click="handlePrev"
      >
        <ChevronLeftIcon class="w-5 h-5" />
        上一步
      </button>
      
      <button 
        class="flex items-center gap-2 px-5 py-2.5 rounded-md text-sm font-medium bg-slate-600 text-white border-none hover:bg-slate-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
        @click="handleNext"
        :disabled="!canProceed"
      >
        下一步
        <ChevronRightIcon class="w-5 h-5" />
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useArticleEditorStore } from '@/stores/articleEditor';
import CategoryTagSelector from '../Components/CategoryTagSelector.vue';
import SeriesSelector from '@/Components/Features/SeriesSelector.vue';
import SeriesPostOrder from '@/Components/Features/SeriesPostOrder.vue';
import { useToast } from '@/Composables/useToast';
import axios from 'axios';
import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/vue/20/solid';

const emit = defineEmits(['prev', 'next']);
const editorStore = useArticleEditorStore();
const toast = useToast();

// 属性接收
const props = defineProps({
  categories: {
    type: Array,
    required: true
  },
  tags: {
    type: Array,
    required: true
  }
});

// 计算属性
const canProceed = computed(() => {
  // 只要选择了分类就可以进入下一步，标签和特色图片为可选
  return editorStore.categoryId !== null;
});

// 方法
const handlePrev = () => {
  emit('prev');
};

// 处理系列变化
const handleSeriesChange = (seriesId) => {
  editorStore.setSeries(seriesId);
};

// 处理排序模式变化
const handleSortModeChange = (newMode) => {
  editorStore.setSortMode(newMode);
};

// 处理系列顺序变化
const handleSeriesOrderChange = (newOrder) => {
  editorStore.setSeriesOrder(newOrder);
};

const handleNext = () => {
  if (!canProceed.value) {
    if (!editorStore.categoryId) {
      toast('请选择文章分类', 'error');
    }
    return;
  }
  
  emit('next');
};
</script> 